<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form
            ref="form"
            :model="form"
            label-width="100px"
            class="flex-start"
          >
            <el-form-item
              label="选择资产科目"
              style="margin-left: 40px; margin-right: 40px"
            >
              <el-select
                v-model="form.assetsAccount"
                placeholder="请选择分类科目"
                style="width: 375px; margin: 0 20px"
              >
                <el-option label="银行存款" value="saving " />
                <el-option label="预付账款" value="pay" />
                <el-option label="应收账款" value="receivable" />
              </el-select>
            </el-form-item>
            <el-form-item label="资产子科目">
              <el-input
                v-model="form.assetsSubaccount"
                placeholder="请输入资产子科目"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="mxClear">重置</el-button>
              <el-button plain icon="el-icon-upload2">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div>
          <el-table
            v-if="tableObj != null"
            ref="multipleTable"
            :data="tableObj.list.data"
            tooltip-effect="dark"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              v-for="(files, index) in tableObj.fields"
              :key="index"
              :prop="files.fields"
              :label="files.translate"
              align="center"
            />
          </el-table>
        </div>
        <div v-if="tableObj == null" style="text-align: center">暂无数据</div>
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: flex-end">
      <el-pagination
        v-if="tableObj != null"
        :current-page="form.pageDate.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.pageDate.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableObj.list.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { liabilities } from "@/api/apifile/Networkfinance";
import timeExamine from "@/api/zhijian/time";

export default {
  data() {
    return {
      form: {
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      tableObj: null,
      businessList: [],
    };
  },
  created() {
    this.$nextTick(() => {
      this.getBuinss();
    });
  },
  methods: {
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val;
      this.init();
    },
    mxClear() {
      this.form = {
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      };
      this.Time = "";
      this.tableObj = null;
    },
    search() {
      // console.log(this.form)
      this.init();
    },
    init() {
      liabilities(this.form).then((res) => {
        // console.log('返回数据：', res)
        this.tableObj = res.data;
      });
    },
    mxDateChange(value) {
      this.form.startTime = value[0];
      this.form.endTime = value[1];
    },
    getBuinss() {
      timeExamine.businessTypeSelectAll().then((res) => {
        if (res.code === 200) {
          this.businessList = res.data || [];
        }
        // console.log('businessList:', this.businessList)
      });
    },
    handlebusinessId(val) {
      this.form.hqBusinessTypeId = val;
    },
    // 重置
    clear() {
      this.form = {};
      this.tableObj = null;
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
